<template>
<div>

      <div style="margin-top:40px;position:relative" >
          <!-- <Moveable 
            style="left:200px;position:absolute;width:100px;height:100px"
            class="moveable"
            v-bind="moveable"
            @drag="handleDrag"
            @resize="handleResize"
            @scale="handleScale"
            @rotate="handleRotate"
            @warp="handleWarp"
          > -->
 <!-- style="left:200px;position:absolute;width:100px;height:100px;border:1px solid red" -->
              <div id="J_chartPieBox"  v-bind:style="styleObject">
              </div>

          <!-- </Moveable> -->
      </div>

           <!-- <Moveable
        class="moveable"
        v-bind="moveable"
        @drag="handleDrag"
        @resize="handleResize"
        @scale="handleScale"
        @rotate="handleRotate"
        @warp="handleWarp"
      >
        <span>Vue Moveable</span>
      </Moveable> -->
</div>
</template>

<script>
  import Moveable from 'vue-moveable';  
  export default {
      components: {
    Moveable
  },
    data () {
     //left:200px;position:absolute;width:100px;height:100px;border:1px solid red
      return {
         abc: "ssssssss",
          styleObject: {
            fontSize: '13px',
            left: '200px',
            top: '100px',
            position: 'absolute',
            width: '100px',
            height: '100px'
        }
      }
    },
    activated () {
      this.getPanel()
    },
    methods: {
      getPanel(){
          let userid=this.$store.state.user.id;


          this.$http({
            url: this.$http.adornUrl(`/report/panelpackage/panel/${userid}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {

                
              //  debugger;
               let panelData= data.panel;


              this.styleObject['width']=panelData.width+'px';
              this.styleObject['height']=panelData.height+'px';
              this.styleObject['left']=panelData.xpos+'px';
              this.styleObject['top']=panelData.ypos+'px';

               this.panelId=panelData.id;

               console.log("this.panelId   "+this.panelId);

                let myHorizontal=[];
                let myVertical=[];

            
                this.$http({
                  url: this.$http.adornUrl(`/report/datapackage/render`),
                  method: 'post',
                  data: this.$http.adornData({
                    'horizontal': panelData.horizontalfield,
                    'vertical': panelData.verticalfield,
                    'dataId': panelData.dataid
                  }
                  )
                }).then(({data}) => {
                  data.columns.forEach((item,index)=>{
                    myHorizontal.push(item[panelData['horizontalfield']]+'月');
                    myVertical.push(item[panelData['verticalfield']]);
                  })

                  console.log("horizontalField: ",panelData['horizontalfield'])
                  console.log("verticalField: ",panelData['verticalfield'])
                  console.log("myHorizontal: ",myHorizontal)
                  console.log("myVertical: ",myVertical)
                  
                    this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))

                    this.chartPie.setOption({
                        title: { text: '在Vue中使用echarts' },
                        tooltip: {},
                        xAxis: {
                            data: myHorizontal
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: myVertical
                        }]
                    })
                    window.addEventListener('resize', () => {
                      this.chartPie.resize()
                    })

                   // 


                })




                  // debugger;

                    // this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))

                    // this.chartPie.setOption({
                    //     title: { text: '在Vue中使用echarts' },
                    //     tooltip: {},
                    //     xAxis: {
                    //         data: myHorizontal
                    //     },
                    //     yAxis: {},
                    //     series: [{
                    //         name: '销量',
                    //         type: 'bar',
                    //         data: myVertical
                    //     }]
                    // })
                    // window.addEventListener('resize', () => {
                    //   this.chartPie.resize()
                    // })


            // if (data && data.code === 0) {
            //   this.dataForm.name = data.businessPackage.name
            //   this.dataForm.createrId = data.businessPackage.createrId
            //     this.dataForm.description = data.businessPackage.description
            // }
          })




      }
    }
  }
</script>
